import React, { useEffect, useState } from 'react';
import '@/views/Index/Cate/Cate.scss'
import { useNavigate } from "react-router-dom";
import Nav from '../../../components/Nav/Nav'
import service from '../../../api/index'
import { Table, Form, Radio, Input, Select, Button, Col, Row, Switch } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { PlusOutlined, ArrowUpOutlined, ArrowDownOutlined, ToTopOutlined } from '@ant-design/icons';

interface Props {

}

interface DataType {
    key: React.Key;
    id: string;
    name: string;
    count: string;
    state: boolean;
    starttime: string;
    sort: string;
}


function Cate(props: Props) {

    let navigator = useNavigate()

    // 发请求
    useEffect(() => {
        catelist({ page: 1, limit: 5 })
    }, [])

    let catelist = async (payload = {}) => {
        let res = await service.dy.cate_list(payload)
        console.log(res);
        // 给数据添加key属性
        res.data.map((item: any) => {
            item.key = item.id
        })
        setDateSource(res.data)
        setTotal(res.data.length)
    }

    const { Option } = Select;

    const [form] = Form.useForm();

    // 表格数据源
    let [dataSource, setDateSource] = useState<DataType[]>([])

    // 总数量
    let [total, setTotal] = useState()

    // 查询
    let onFinish = async (values: any) => {
        console.log(values);
        let res = await service.dy.cate_search(values)
        setDateSource(res.data)
        setTotal(res.data.length)
    }

    // 重置
    const onReset = () => {
        form.resetFields();
    };

    // 表头
    const columns: ColumnsType<DataType> = [
        {
            title: '类目名称',
            dataIndex: 'name',
            align: 'center',
            width: '20%',
            // render: (_, record) => {
            //     return <></>
            // }
        },
        {
            title: '商品数量',
            dataIndex: 'count',
            align: 'center',
        },
        {
            title: '状态',
            dataIndex: 'state',
            align: 'center',
            render: (_, record) => <Switch checked={record.state} onChange={() => { switchChange(record.id,record.state) }} />
        },
        {
            title: '创建时间',
            dataIndex: 'starttime',
            align: 'center',
            width: '12%',
        },
        {
            title: '排序',
            dataIndex: 'sort',
            align: 'center',
            render: (_, record) => {
                return <>
                    <ArrowUpOutlined />
                    <ArrowDownOutlined />
                    <ToTopOutlined />
                </>
            }
        },
        {
            title: '操作',
            align: 'center',
            width: '20%',
            render: (_, record) => {
                return <>
                    <a className='manage option_btn' onClick={() => { }}>
                        管理商品
                    </a>
                    <a className='delete option_btn' onClick={() => { cateDelete(record.id) }}>
                        删除
                    </a>
                </>
            }
        },

    ];

    // 开关
    let switchChange = async (id:any,state: any) => {
        if (state) {
            let res = await service.dy.cate_update({id:id, state: false })
        } else {
            let res = await service.dy.cate_update({id:id, state: true })
        }
        catelist({ page: 1, limit: 5 })
    }

    // 删除
    let cateDelete = async (id: any) => {
        let res = await service.dy.cate_delete({ id: id })
        catelist({ page: 1, limit: 5 })
    }

    //   新建
    let toCateAdd = () => {
        navigator('/index/cate_add')
    }

    // 批量管理
    let batchAll = () => { }

    // 分页设置
    let pageChange = (page: any, pageSize: any) => {
        // console.log(page, pageSize);
        catelist({ page: page, limit: pageSize })
    };

    // 复选框(全选/选择)
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [loading, setLoading] = useState(false);

    const start = () => {
        setLoading(true);
        // ajax request after empty completing
        setTimeout(() => {
            setSelectedRowKeys([]);
            setLoading(false);
        }, 1000);
    };

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };

    // const rowSelection = {
    //     selectedRowKeys,
    //     onChange: onSelectChange,
    // };
    const hasSelected = selectedRowKeys.length > 0;



    return (
        <div className='cate'>
            <Nav />
            <div className="query">
                <Form
                    className='form'
                    form={form}
                    name="control-hooks"
                    onFinish={onFinish}
                >
                    <Row>
                        <Col span={1}></Col>
                        <Col span={6}>
                            <Form.Item name="name" label="分类名称" rules={[{ required: false }]}>
                                <Input placeholder='请输入' />
                            </Form.Item>
                        </Col>
                        <Col span={13}></Col>
                        <Col span={3}>
                            <Form.Item>
                                <Button className='search' type="primary" htmlType="submit">
                                    查询
                                </Button>
                                <Button className='reset' htmlType="button"
                                    onClick={onReset}
                                >
                                    重置
                                </Button>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div className="list">
                <div className="top">
                    <div className="title">
                        课程分类列表
                    </div>
                    <div className="btn">
                        <Button className='add' type="primary" icon={<PlusOutlined />} onClick={toCateAdd}>
                            新建
                        </Button>
                        <Button className='batch' onClick={start} disabled={!hasSelected} loading={loading}>
                            批量管理
                        </Button>
                    </div>
                </div>
                <Table className='table' dataSource={dataSource} columns={columns} scroll={{ y: 420 }} pagination={{
                    showSizeChanger: false,
                    onChange: pageChange,
                    defaultCurrent: 1,
                    total: total
                }} />
            </div>
        </div>
    );
}

export default Cate;